```html
<script setup>
  import * as pagination from "@zag-js/pagination"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed } from "vue"
  import { data } from "./data"

  const service = useMachine(pagination.machine, {
    id: "1",
    count: data.length,
  })

  const api = computed(() => pagination.connect(service, normalizeProps))
</script>

<template>
  <nav v-if="api.totalPages > 1" v-bind="api.getRootProps()">
    <ul>
      <li>
        <a href="#previous" v-bind="api.getPrevTriggerProps()">
          Previous <span class="visually-hidden">Page</span>
        </a>
      </li>
      <li
        v-for="(page, i) in api.pages"
        :key="page.type === 'page' ? page.value : `ellipsis-${i}`"
      >
        <span v-if="page.type === 'page'">
          <a :href="`#${page.value}`" v-bind="api.getItemProps(page)">
            {{page.value}}
          </a></span
        >
        <span v-else>
          <span v-bind="api.getEllipsisProps({ index: i })">&#8230;</span>
        </span>
      </li>
      <li>
        <a href="#next" v-bind="api.getNextTriggerProps()">
          Next <span class="visually-hidden">Page</span>
        </a>
      </li>
    </ul>
  </nav>
</template>
```
